<template>
  <div class="Container">
    <div class="nav-top">
      <nav-bar left-text="" left-arrow @click-left="onClickLeft">
        <template #title>
          <cell is-link @click="showPopup">
            <span>{{ NavCategory.name }}</span
            >&nbsp;&nbsp;
            <i
              style="font-size: 1.25rem"
              :class="rotate % 2 == 0 ? 'fa fa-angle-up' : 'fa fa-angle-down'"
            ></i>
          </cell>
        </template>
        <template #right>
          <router-link :to="{ name: 'Home-SystemLesson' }">
            <tag type="primary" size="medium">
              <icon
                name="sort"
                size="18"
                class="icon-search"
                @click-right="onClickRight"
                style="
                  transform: rotate(-90deg);
                  color: aliceblue;
                  font-size: 1rem;
                  margin-right: 0.15rem;
                "
              />同步课
            </tag>
          </router-link>
        </template>
      </nav-bar>
    </div>
    <!-- 弹出层 -->
    <popup
      round
      @click-overlay="clickHandle"
      v-model:show="show"
      style="
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 5.9375rem;
        width: 50vw;
        height: 15vh;
        box-sizing: border-box;
      "
    >
      <div class="rotate-main">
        <grid :column-num="3" :border="false">
          <grid-item
            v-for="item in course"
            :text="item.title"
            :to="{ name: item.link, query: { id: item.id } }"
          />
        </grid>
      </div>
    </popup>

    <!-- 下拉选项 -->
    <dropdown-menu>
      <dropdown-item v-model="value1" :options="option1"> </dropdown-item>
      <dropdown-item v-model="value2" :options="option2"> </dropdown-item>
    </dropdown-menu>

    <!-- 导航条 -->
    <div class="listMove">
      <tabs v-model:active="active" swipeable type="card">
        <tab :title="'全部 '">
          <div class="content">
            <!-- movelessonto跳转 -->
            <div class="con" @click="MoveLessonTo(Combo.id)">
              <img
                :src="dalImg(Combo.picture)"
                alt="视频"
                style="width: 100%"
              />
              <div class="con1">
                <h5>{{ Combo.name }}</h5>
                <span
                  ><i class="fa fa-copyright" aria-hidden="true"></i
                  >{{ Combo.price }}</span
                >
              </div>
              <div class="con2">
                <div class="con2-1">
                  <span>课程：<i>1</i>个</span><span>视频：<i>1</i>集</span
                  ><span>习题：87道</span>
                </div>
                <div class="con2-2">
                  <span
                    ><i
                      class="fa fa-copyright"
                      aria-hidden="true"
                      style="text-decoration: line-through"
                    ></i
                    >{{ Combo.price }}</span
                  >
                </div>
              </div>
            </div>

            <!-- 列表 -->
            <!-- 全部 -->

            <div class="list" v-for="i in Course">
              <card
                class="card"
                :price="i.coursePrice"
                :title="i.courseName"
                :thumb="dalImg(i.picture)"
                @click="VDetail(i)"
              >
                <template #num> 210903人购买 </template>
              </card>
              <div class="list-bottom">
                <div
                  class="bot-left"
                  style="
                    display: flex;
                    width: 35vw;
                    justify-content: space-between;
                  "
                >
                  <span>视频：<i>1</i>集</span><span>习题：<i>1</i>题</span>
                </div>
                <div class="bot-righ" @click="current(i.id)">
                  <i
                    style="color: orange; margin-right: 0.3rem"
                    class="fa fa-plus-square"
                  ></i>
                  <span style="color: orange">添加购物车</span>
                </div>
              </div>
            </div>
          </div>
        </tab>
        <!-- 其他选项 -->
        <tab
          v-for="item in Category"
          :title="item.name"
          :key="item.id"
          :name="item.id"
          @change="changeHandle"
        >
          <div class="content">
            <div class="list" v-for="i in Course">
              <card
                class="card"
                :price="i.comboPrice"
                :title="i.courseName"
                :thumb="dalImg(i.picture)"
                @click="VDetail(i)"
              />
              <div class="list-bottom">
                <div
                  class="bot-left"
                  style="
                    display: flex;
                    width: 35vw;
                    justify-content: space-between;
                  "
                >
                  <span>视频：4集</span><span>习题：66题</span>
                </div>
                <div
                  class="bot-righ"
                  @click="
                    current(
                      uids,
                      i.courseName,
                      i.picture,
                      i.coursePrice,
                      i.videoTotal,
                      1,
                      i.id
                    )
                  "
                >
                  <i
                    style="color: orange; margin-right: 0.3rem"
                    class="fa fa-plus-square"
                  ></i
                  ><span style="color: orange">添加购物车</span>
                </div>
              </div>
            </div>
          </div>
        </tab>
      </tabs>
    </div>

    <!-- 购物车 -->
    <action-bar class="Home-cart" @click="ToCart">
      <action-bar-icon icon="cart-o" class="Home-cart" />
    </action-bar>
  </div>
</template>

<script setup>
import {
  NavBar,
  Icon,
  Popup,
  Tag,
  Tab,
  Tabs,
  Card,
  ActionBar,
  ActionBarIcon,
  DropdownMenu,
  DropdownItem,
  Grid,
  GridItem,
  Toast,
} from "vant";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import "font-awesome/css/font-awesome.min.css";
import { dalImg, isLoginEd } from "../utils/tools";
import { getUserAPI } from "../API/li";
//引入接口
import {
  CourseTotalAPI,
  ComboTreeAPI,
  CategoryAPI,
  NavCategoryAPI,
  addCartAPI,
  delCartAPI,
} from "../API/wang";
const route = useRoute();
const router = useRouter();

const Combo = ref([]);
const Course = ref([]);
const Category = ref([]);
const NavCategory = ref([]);

//
let names = ref("");
let pictures = ref("");
let coursePrices = ref("");
let videoTotals = ref("");
let textNumbers = ref("");
let courseIds = ref("");

// i.courseName,
// i.picture,
// i.coursePrice,
// i.videoTotal,
// 1,
// i.id
const loadData = async () => {
  /* 套餐列表 */
  const data = await ComboTreeAPI(route.query.id);
  Combo.value = data.data[route.query.id - 1];
  // console.log(Combo.value);
  /* 课程列表 */
  const Cdata = await CourseTotalAPI(route.query.id);
  Course.value = Cdata.data;
  console.log(Cdata.data[0]);
  names.value = Cdata.data[0].courseName;
  pictures.value = Cdata.data[0].picture;
  coursePrices.value = Cdata.data[0].coursePrice;
  videoTotals.value = Cdata.data[0].videoTotals;
  textNumbers.value = Cdata.data[0].version;
  courseIds.value = Cdata.data[0].id;
  /* 导航 */
  const nav = await CategoryAPI(route.query.id);
  Category.value = nav.data;
  console.log(Category.value);
  /* 弹出层导航 */
  const Nav = await NavCategoryAPI(route.query.id);
  NavCategory.value = Nav.data[route.query.id - 1];
  console.log(NavCategory.value);
};
loadData();

/* 跳转详情页 */
const MoveLessonTo = (id) => {
  router.push({
    name: "Home-MoveLessonTo",
    query: {
      id,
    },
  });
};

/* 返回上一级 */
const onClickLeft = () => {
  router.push({
    name: "Home",
  });
};
/* 下拉菜单 */
const rotate = ref(1);
const show = ref(false);
const showPopup = () => {
  rotate.value++;
  if (rotate.value % 2 == 0) {
    show.value = true;
  }
};
let clickHandle = () => {
  rotate.value = 1;
};

const value1 = ref(0);
const value2 = ref("a");
const option1 = [
  { text: "教材版本", value: 0 },
  { text: "人教新课程", value: 1, id: 0 },
  { text: "北师大版", value: 2, id: 1 },
  { text: "华师大版", value: 3, id: 2 },
  { text: "浙教新版", value: 4, id: 3 },
  { text: "湘教版", value: 5, id: 4 },
  { text: "北京课改版", value: 6, id: 5 },
  { text: "冀教版", value: 7, id: 6 },
  { text: "沪科版", value: 8, id: 7 },
  { text: "沪教版", value: 9, id: 8 },
  { text: "人教版", value: 10, id: 9 },
  { text: "苏教版", value: 11, id: 10 },
  { text: "人教版", value: 12, id: 11 },
  { text: "青岛版", value: 13, id: 12 },
  { text: "鲁教版", value: 14, id: 13 },
];
const option2 = [
  { text: "七年级上册", value: "a" },
  { text: "七年级下册", value: "b" },
  { text: "八年级上册", value: "c" },
  { text: "八年级下册", value: "d" },
  { text: "九年级上册", value: "e" },
  { text: "九年级下册", value: "f" },
];
/* 顶部弹出部分 */
let course = ref([
  { title: "初中数学", id: 1, link: "Home-MiddleMath" },
  { title: "经典语文", id: 2, link: "Home-Chinese" },
  { title: "趣味英语", id: 3, link: "Home-English" },
  { title: "初中物理", id: 4, link: "Home-Physics" },
  { title: "初中化学", id: 5, link: "Home-Chemistry" },
  { title: "高中数学", id: 6, link: "Home-HighMath" },
  { title: "小学数学", id: 7, link: "Home-Mathematics" },
  { title: "套餐", id: 8, link: "Home-Package" },
]);

let uids = ref("");
getUserAPI().then((res) => {
  uids.value = res.data.id;
  console.log(uids);
});
/* 添加、删除购物车   addCartAPI,delCartAPI */

console.log(names);
const current = () => {
  if (isLoginEd()) {
    // console.log(Course.value);
    addCartAPI(
      uids.value,
      names.value,
      pictures.value,
      coursePrices.value,
      videoTotals.value,
      textNumbers.value,
      courseIds.value,
    ).then((res) => {
      console.log(res);
      Toast.success("添加购物车成功")
    });
  } else {
    Toast("请登录");
    router.push({
      name: "Login",
    });
  }
};
/* 跳转购物车列表 */
const ToCart = () => {
  router.push({
    name: "Home-Cart",
  });
};
/* 课程跳转详情 */
/* const VDetail = (i) => {
  router.push({
    name: "Home-Training",
    query: {
      idTwo: i.id,
    },
  });
}; */
</script>
<style>
.Container .fa fa-minus-square {
  color: red;
}
.Container {
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
.Container .nav-top .icon-search {
  color: #333;
}
.Container li {
  width: 30%;
  line-height: 1.5625rem;
  text-align: center;
  border-radius: 1.0625rem;
}

.Container .van-tab--card {
  border: none;
}
.Container .rotate-main {
  width: 50vw;
  height: 15vh;
  margin: 0 auto;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: #666;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.Container ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.Container li {
  width: 30%;
  line-height: 1.5625rem;
  text-align: center;
  border-radius: 1.0625rem;
  color: #666;
}
.Container .listMove {
  flex: 1;
}
.Container .listMove .van-tab--card {
  color: #666;
}
.Container .listMove .van-tabs__nav--card {
  border: none;
}
.Container .listMove .van-tab--card.van-tab--active {
  background-color: cornflowerblue;
  color: aliceblue;
  font-size: 0.12rem;
  height: 1.3rem;
  margin: auto 0;
  border-radius: 0.3rem;
}
.Container .content {
  border-top: rgb(226, 221, 221) 0.0625rem solid;
  overflow: auto;
  height: 80vh;
  background-color: #fffefe;
}
.Container .con {
  width: 90vw;
  height: 30vh;
  box-sizing: border-box;
  margin: 1rem auto;
  display: flex;
  box-shadow: 0px 0px 0.3125rem 0px rgba(0, 0, 0, 0.5);
  padding: 0.3rem;
  flex-direction: column;
}
.Container .con img {
  height: 70%;
}
.Container .con1 {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.Container .con1 span {
  color: orange;
  font-weight: bolder;
}
.Container .con1 span i {
  margin-right: 0.2rem;
}
.Container .con2 {
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  font-size: 0.12rem;
}
.Container .con2 .con2-1 span {
  margin-right: 0.6rem;
}
.Container .con2 .con2-2 {
  text-decoration: line-through;
}
.Container .list {
  background-color: rgb(249, 249, 249);
  width: 95vw;
  height: 19vh;
  margin: 1rem auto;
  font-size: 0.12rem;
}
.Container .card {
  height: 80%;
}
.Container .list-bottom {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 1rem;
  border-top: rgb(226, 221, 221) 0.0625rem solid;
}
.Container .list-bottom .bot-right {
  color: orange;
  font-size: 0.8125rem;
}
.Container .list-bottom .bot-right .add {
  margin-right: 0.375rem;
}
.Container .Home-cart {
  width: 3rem;
  height: 3rem;
  position: fixed;
  bottom: 2rem;
  left: 80vw;
  background-color: orange;
  z-index: 999;
  border-radius: 3rem;
  line-height: 3rem;
  color: aliceblue;
}
.Container .Home-cart .van-icon:before {
  color: aliceblue;
  font-size: 1.5rem;
}
.Container .Home-cart .van-badge {
  width: 1.2rem;
  height: 1.2rem;
  border: none;
  font-size: 0.8rem;
  line-height: 1.2rem;
  font-weight: normal;
}
.Container a {
  color: #333;
}
.Container .van-nav-bar .van-icon {
  color: #333;
}
.Container i {
  font-style: normal;
}
.Container .van-card__title {
  line-height: 2rem;
}
.Container .van-card__price {
  color: orange;
}
/* 导航 */
.Container .van-dropdown-menu__bar {
  height: 2rem !important;
  border-bottom: #f2eeee 1px solid;
  border-top: #f2eeee 1px solid;
}
.Container .van-tabs__wrap,
.van-tabs__nav--card {
  background-color: #f1f1f1;
}
/* 弹出层样式 */
.Container .van-grid-item__content {
  padding: 0;
}
.Container .van-grid-item__text {
  line-height: 1.9rem;
}
</style>
